<template>
    <div class="activity">
        <!-- 查看活动帖子的详情 -->
        <span style="float:left">
            <router-link to="/activityyes">
                <b>
                    <i style="margin:0.2rem" class="iconfont icon-xiangzuojiantou"></i>
                </b>
            </router-link>
        </span>
        <h3 style="text-align: center;">
                <b>
                    活动详情
                </b>
        </h3>
        <div class="allactivity">
            <!-- 活动的帖子组件 -->
           <p>
                <van-image  
                    width="1rem" 
                    height="1rem" 
                    radius="100%" 
                    fit="cover" 
                     :src="require('../../assets/img/1.jpg')" 
                />
                <span>发布人昵称</span>
           </p>
            <h3>
                
                走向未来,冬奥加油!
                <!-- <button class="activitycontain">活动详情</button> -->
            </h3>
            <p>简介:这是一个活动</p>
            <p>
                <van-image 
                    width="10rem"
                    height="5rem"
                    fit="cover" 
                    :src="require('../../assets/img/1.jpg')" 
                />
            </p>
            <p>已报人数100</p>
            <p>报名时间21.2.8-21.5.8</p>
            <p>活动时间21.2.8-21.5.8</p>
            <p>
                <!-- <button style="float:right;margin-left: 0.5rem;">查看报名情况</button> -->
                <!-- <button @click="gobtn()" style="float:right">
                    取消报名
                </button> -->
                <!-- 此处可以为已截至 -->
            </p>



            
        </div>    
    </div> 
</template>

<script>
export default {
    name:'Activityone',
    data(){
        return{

        }
    },
    methods: {
        // gobtn(){
        //     //取消报名
        //     //调用取消报名的接口 来这里
        // }
    },
}
</script>

<style lang="less" scoped>
*{
    padding: 0;
    margin: auto;
}
html,boy{
    height: 100%;
    width: 100%;
}
.activity{
    //给帖子详情页加一个背景
    // background-image: url("../../assets/img/personpiture.png");
    // background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
        .allactivity{
        width: 100%;
        height: 100%;
        .activitycontain{
            float: right;
            border: none;
            background-color: burlywood;
            color: white;
            padding: 0.1rem;
            margin: auto;
        }
            margin-top:10% ;
            width: 100%;
            p{
                margin-left:2% ;
                margin: 0.2rem 0.2rem;
                button{
                        float: right;
                        background-color: white;
                        border: none;
                        color: cornflowerblue;
                        font-size: 0.2rem;
                }
            }

    }
}


</style>